<!-- 课程详情 -->
<template>
  <div class="detail-wrapper">
       <BreadCrumb :list="crumbList"></BreadCrumb>
       <DetailHeader :detail="detailData" @refresh="getDetail"/>
        <div class="detail-container mt20">
            <ul class="detail-tab">
                <li v-for="tab in tabList" :key="tab.key" :class="[{'active' : currentTab === tab.key}]" @click="changeTab(tab)">
                    <i :class="['iconfont', tab.icon ]"></i>{{tab.name}}
                </li>
            </ul>
            <div class="detail-right" v-show="detailData.id">
                <component :is="componentMap[currentTab]" :detail="detailData" @update-detail="getDetail"></component>  
            </div>
        </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch} from 'vue';
import BreadCrumb from '@/components/bread-crumb.vue';
import DetailHeader from './part/detail-header.vue'
import CatalogueView from './part/catalogue.vue';
import EvaluateView from './part/evaluate.vue';
import HomeWorkView from './part/homework.vue';
import TestView from './part/test.vue';

import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { jumpHref } from '@/router/jumpHref';
import { queryToJson } from '@/lib/tools';

const store = useStore();

const route = useRoute();


// 面包屑
const crumbList = ref([]);

const componentMap = {
    CatalogueView,
    HomeWorkView,
    EvaluateView,
    TestView
};

// 底部tabList
const tabList = ref([
    {
        name: '课程章节',
        key: 'CatalogueView',
        icon: 'icon-kechengsucai'
    },
    {
        name: '作业',
        key: 'HomeWorkView',
        icon: 'icon-zuoye'
    },
    {
        name: '测试',
        key: 'TestView',
        icon: 'icon-a-ceshi1x'
    },
    {
        name: '课程评价',
        key: 'EvaluateView',
        icon: 'icon-kechengpingjia'
    }
]);

// 当前tab
const currentTab = ref(queryToJson().tab||'CatalogueView');

// 课程详情
const detailData = ref({});

const currentUser = computed(() => {
    return store.state.currentUser;
})

// 监听个人信息变化
watch(() => store.state.currentUser, (val) => {
    if(val.userId) {
        getDetail();
    }
}, {immediate: true});


// 获取课程详情
function getDetail () {
    G_transmit('moocDetail', {
        queries: {
            id: route.params.moocId
        },
        silence: true
    }).then((res) => {
        detailData.value = res.data || {};
        if(detailData.value.creatorId !== currentUser.value.userId) {
            G_dispatchEvent('toErrorPage', { title: '很抱歉，您暂时没有权限对该慕课进行管理', code: 500, buttonLabel: '返回', target: getBackUrl()});
        }
    }).catch((_err) => {
       const { status } = _err;
       if(status.code === 30800404) {
           G_dispatchEvent('toErrorPage', { title: '该慕课可能已经被删除', code: 500, buttonLabel: '返回', target: getBackUrl()});
           return;
       }
       G_dispatchEvent('toast', { message: status.desc, type: 'error' });
    })
}

function changeTab(item) {
    let query = window.location.search.substring(1);
    console.log('query', query)
    if(item.key === currentTab.value) {
        return;
    }
    currentTab.value = item.key;
    window.history.replaceState('', '', `?tabStr=${queryToJson().tabStr}&tab=${item.key}`);
}

function getBackUrl() {
    let query = window.location.search.substring(1);
    return jumpHref.mooc.moocList(query);
}

onMounted(() => {
    let backUrl = getBackUrl();
    crumbList.value = [
        {
            name: '首页',
            route: jumpHref.home.home(),
        },
        {
            name: '慕课管理',
            route: backUrl,
        },
        {
            name: '编辑慕课',
            route: {
                name: '',
            }
        }
    ];
    // getDetail();
})


</script>

<style lang="scss" scoped>
.detail-wrapper {
    background: #F8F8F8;
}
.mt20 {
    margin-top: 20px;
}
.detail-container {
    display: flex;
    .detail-tab {
        width: 200px;
        height: 252px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 20px 6px 0px;
        font-size: 16px;
        li {
            height: 38px;
            line-height: 38px;
            border-radius: 4px;
            margin-bottom: 20px;
            color: var(--srt-main-text-color);
            padding: 0px 14px;
            user-select: none;
            cursor: pointer;
            &.active, &:hover {
                background: #E7F1FF;
                color: var(--srt-main-active-text-color);
                .iconfont {
                    color: var(--srt-main-active-text-color);
                }
            }
            .iconfont {
                font-size: 18px;
                margin-right: 8px;
                transform: translateY(1px);
                display: inline-block;
                color: #999999;
            }
        }
    }
    .detail-right {
        margin-left: 20px;
        background: #ffffff;
        flex: 1;
        padding: 0px 20px;
        min-height: 600px;
    }
    :deep(.no-data) {
        margin-top: 80px;
    }
}

</style>